<template>
  <div v-if="operaList.length" class="table-operates">
    <div v-show="showAllList.length <= 3" class="justify-satart flex cursor-pointer text-[#1D7FF2]">
      <div
        v-for="(item, index) in showAllList"
        :key="index"
        :style="{ color: colorSpecial.includes(item.name) ? '#C41C24' : '#1D7FF2' }"
        :class="`${index > 0 ? 'ml-[12px]' : 'ml-0'}`"
        @click="doDetail(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div v-show="showAllList.length > 3" class="justify-satart flex cursor-pointer text-[#1D7FF2]">
      <div
        v-for="(item, index) in showList"
        :key="index"
        :style="{ color: colorSpecial.includes(item.name) ? '#C41C24' : '#1D7FF2' }"
        class="mr-[12px]"
        @click="doDetail(item)"
      >
        {{ item.name }}
      </div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link text-[#1D7FF2]"> 更多 </span>
        <el-dropdown-menu slot="dropdown" class="table-operates-dropdown">
          <el-dropdown-item
            v-for="(item, index) in showMoreList"
            :key="index"
            :command="{ name: item.name }"
            :style="{ color: colorSpecial.includes(item.name) ? '#C41C24' : '#1D7FF2' }"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableOperates",
  props: {
    operaList: {
      type: Array,
      default: () => [],
    },
    colorSpecial: {
      type: Array,
      default: () => ["删除"],
    },
  },
  computed: {
    showAllList() {
      return this.operaList.filter((item) => item.show);
    },
    showList() {
      return this.showAllList.slice(0, 2);
    },
    showMoreList() {
      return this.showAllList.slice(2);
    },
  },
  methods: {
    doDetail(item) {
      item.fn && item.fn();
    },
    handleCommand(command) {
      const { name } = command;
      const itemFn = this.showMoreList.filter((item) => item.name === name);
      itemFn[0].fn && itemFn[0].fn();
    },
  },
};
</script>

<style lang="scss" scoped>
.table-operates-dropdown {
  .el-dropdown-menu__item {
    height: 32px;
    padding: 0 8px !important;
    font-size: 14px;
    line-height: 32px !important;
  }
}
</style>
